<template>
  <div class="box">
    <div class="form_box" style="">
      <div class="login_box">Login</div>
      <div>
        <el-form
          ref="formRef"
          :rules="rules"
          style="min-width: 100%;text-align: center"
          :model="dynamicValidateForm"
          label-width="auto"
          class="demo-dynamic"
          
        >
          <el-form-item prop="name"  style="display: inline-block">
            <div style="display: flex">
              <div
                style="
                  width: 6vw;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                账户：
              </div>
              <el-input
                clearable 
                input-style="color:black"
                placeholder="账户名称"
                v-model="dynamicValidateForm.name"
              />
            </div>
          </el-form-item>

          <el-form-item prop="password" style="display: inline-block">
            <div style="display: flex">
              <div
                style="
                  width: 6vw;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                "
              >
                密码:
              </div>
              <el-input
              clearable 
              style="width: 100%; "
                placeholder="密码"
                v-model="dynamicValidateForm.password"

              />
            </div>
          </el-form-item>

          <el-form-item>
            <div
              style="
                display: flex;
                justify-content: space-between;
                align-items: center;
                flex-wrap: wrap;
                width: 100%;
                padding: 0px 8vh;
              "
            >
              <el-button type="primary" @click="login()">登录</el-button>
              <el-button type="primary" @click="empty()">清空</el-button>
            </div>
          </el-form-item>
        </el-form>

        <el-dialog> </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { onMounted, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { getProjectListApi } from "@/api/project.js"; // 导入 API 接口

// 声明一个响应式的 projectList 变量  
const projectList = ref([]);   

// 当组件挂载时获取项目列表  
const getProjectList = async () => {  
  try {  
    const res = await getProjectListApi();  
    // console.log(res);  
    projectList.value = res.data; // 假设 res.data 包含项目列表  
    // console.log("projectList:" + projectList.value);

  } catch (error) {  
    console.error("获取项目列表时出错:", error);  
  }  
}  
// 使用 onMounted 生命周期钩子来调用获取项目列表的函数  
// onMounted(getProjectList);
onMounted(() => {  
  getProjectList();  
  console.log("projectList initialized:", projectList); // 这里打印的值是空的，因为数据尚未加载  
}); 

const formRef = ref(null);
const router = useRouter();
const dynamicValidateForm = ref({
  name: "",
  password: "",
});

const empty = () => {
  console.log(1231);
  dynamicValidateForm.value.name = "";
  dynamicValidateForm.value.password = "";
  console.log(dynamicValidateForm.value);
};

const rules = reactive({
  name: [
    { required: true, message: "账户不能为空", trigger: "blur" },
    { min: 3, max: 10, message: "用户名长度为3 - 10位", trigger: "blur" },
  ],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
});

// const users = ref({});
// 假数据
const users = {
  admin: { password: "admin", role: "admin" },
  xiaozhang: { password: "123456", role: "principal" },
  gexunshi: { password: "123456", role: "individualTrainer" },
  jiazhang: { password: "123456", role: "parent" },
};

const login = () => {
  const { name, password } = dynamicValidateForm.value;
  const user = users[name];

  if (!name || !password) {
    ElMessage.error("用户名或密码不能为空");
    return;
  }

  if (user && user.password === password) {
    // 将角色存储在 localStorage 中
    localStorage.setItem("userRole", user.role);

    switch (user.role) {
      case "admin":
        router.push({ path: "/newHomePage" });
        break;
      case "principal":
        router.push({ path: "/principalHomePage" });
        break;
      case "individualTrainer":
        router.push({ path: "/teacherHomePage" });
        break;
      case "parent":
        router.push({ path: "/parentHomePage" });
        break;
      default:
        ElMessage.error("角色未定义");
    }
  } else {
    ElMessage.error("用户名或密码错误");
  }
};

//   const submitForm = async (formEl) => {
// if (!formEl) return;
// await formEl.validate((valid, fields) => {
//   if (valid) {
//     loginapi(dynamicValidateForm.value).then((res) => {
//       console.log(res);
//       if (res.code == "200") {
// router.push("/");
// users.value = res.data;
// 在柜台中 存储用户信息
//           localStorage.setItem("xm-user", JSON.stringify(res.data)); // 将表单数据保存到 localStorage 中，键名为 "xm-user"
//         } else {
//           console.error("error submit!", res.msg);
//           ElMessage.error("账户密码错误");
//         }
//       });
//     } else {
//       console.log("error submit!", fields); // 如果表单验证未通过，打印错误字段信息
//     }
//   });
// };
</script>

<style scoped>
.box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  background-image: url("@/assets/imgs/backImage.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}



.form_box {
  width: 450px;
  height: 250px;
  border-radius: 10px;
  background-color: #fff;
}
.login_box {
  height: 25%;
  text-align: center;
  font-size: 30px;
  color: #f9d533;
}
.demo-dynamic {
  /* background-color: transparent; */
}
:deep(.el-input__wrapper) {
  background-color: transparent;
  border: 0;
  /* box-shadow: 0 0 0px; */
  color: #f9d533;
}

:deep(.el-input__inner::placeholder) {
  /* color: black; */
}
/* .el-input__wrapper */
</style>
